<template>
  <el-container class="common-layout">
    <el-header class="header-top">
      <div class="header-wrap">
        <img
          src="/icon.svg"
          class="logo"
          @click="router.replace('/')"
          width="35"
          height="35"
          alt="logo"
        />
        <el-divider direction="vertical"></el-divider>
        <span @click="router.replace('/')" class="site-name logo">
          Leisure Lib
        </span>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Menu></Menu>
      </el-aside>
      <el-main>
        <div class="main-container">
          <router-view v-slot="{ Component }">
            <transition name="page-fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import Menu from "@/components/menu.vue";
import { useRouter } from "vue-router";
const router = useRouter();
</script>

<style>
.page-fade-enter-active,
.page-fade-leave-active {
  will-change: opacity;
  transition: all 500ms;
}

.page-fade-enter,
.page-fade-leave-to {
  opacity: 0;
}

#nprogress .bar {
  background-color: var(--color-primary);
}

.common-layout {
  height: 100%;
  .header-wrap {
    background-color: var(--color-w);
    height: 100%;
    padding: 0 calc(var(--padding-base) * 4);
    display: flex;
    align-items: center;
    .site-name {
      font-size: var(--font-size-L);
    }
    .logo {
      cursor: pointer;
      will-change: filter;
      transition: filter 300ms;
    }
    .logo:hover {
      filter: drop-shadow(0 0 6px #646cffaa);
    }
  }
}
</style>
